/**
 * 小工具页面
 * 提供各种实用工具的导航入口
 * 
 * 该页面是工具功能的主入口，展示所有可用的实用工具，包括：
 * 1. 批量图片裁剪工具
 * 2. 批量文件重命名工具
 * 
 * 页面特性：
 * - 响应式布局设计
 * - 工具卡片展示
 * - 功能特点说明
 * - 直接导航到具体工具页面
 * 
 * 工具页面使用React Router进行导航，每个工具都有独立的页面组件
 */
import React from 'react';
import { Card, Row, Col, Space, Button, Typography } from 'antd';
import { PictureOutlined, EditOutlined, ToolOutlined, ArrowRightOutlined } from '@ant-design/icons';
import { Link } from 'react-router-dom';

const { Title, Paragraph } = Typography;

/**
 * 小工具页面组件 - 导航中心
 * 
 * 提供所有实用工具的概览和导航功能
 * 用户可以通过此页面访问各种实用工具
 */
const ToolsPage: React.FC = () => {

  return (
    <div className="app-page">
      <Row gutter={[24, 24]}>
        <Col span={24}>
          <Card>
            <Space direction="vertical" size="large" style={{ width: '100%' }}>
              <div style={{ textAlign: 'center' }}>
                <Title level={2}>
                  <ToolOutlined style={{ marginRight: 16, color: 'var(--app-primary-color)' }} />
                  实用工具
                </Title>
                <Paragraph type="secondary">
                  提供各种实用的文件处理和图片处理工具，帮助您提高工作效率
                </Paragraph>
              </div>

              <Row gutter={[24, 24]}>
                {/* 图片裁剪工具卡片 */}
                <Col xs={24} md={12}>
                  <Card
                    hoverable
                    style={{ height: '100%' }}
                    actions={[
                      <Link to="/tools/image-crop" key="image-crop">
                        <Button type="primary" icon={<ArrowRightOutlined />}>
                          进入工具
                        </Button>
                      </Link>
                    ]}
                  >
                    <Space direction="vertical" size="middle" style={{ width: '100%' }}>
                      <div style={{ textAlign: 'center' }}>
                        <PictureOutlined style={{ fontSize: '48px', color: 'var(--app-primary-color)' }} />
                      </div>
                      <Title level={4} style={{ textAlign: 'center', margin: 0 }}>
                        批量图片裁剪
                      </Title>
                      <Paragraph type="secondary" style={{ textAlign: 'center' }}>
                        支持批量上传图片文件，提供多种裁剪比例选项，包括正方形、标准比例、宽屏比例等，处理完成后可直接下载裁剪后的图片。
                      </Paragraph>
                    </Space>
                  </Card>
                </Col>

                {/* 文件重命名工具卡片 */}
                <Col xs={24} md={12}>
                  <Card
                    hoverable
                    style={{ height: '100%' }}
                    actions={[
                      <Link to="/tools/file-rename" key="file-rename">
                        <Button type="primary" icon={<ArrowRightOutlined />}>
                          进入工具
                        </Button>
                      </Link>
                    ]}
                  >
                    <Space direction="vertical" size="middle" style={{ width: '100%' }}>
                      <div style={{ textAlign: 'center' }}>
                        <EditOutlined style={{ fontSize: '48px', color: '#52c41a' }} />
                      </div>
                      <Title level={4} style={{ textAlign: 'center', margin: 0 }}>
                        批量文件重命名
                      </Title>
                      <Paragraph type="secondary" style={{ textAlign: 'center' }}>
                        批量清除文件名中的中文字符，将空格替换为下划线或其他指定字符，支持预览重命名结果，确保操作安全。
                      </Paragraph>
                    </Space>
                  </Card>
                </Col>
              </Row>

              {/* 功能特点 */}
              <Card title="工具特点" type="inner">
                <Row gutter={[24, 24]}>
                  <Col xs={24} md={8}>
                    <Space direction="vertical" align="center" style={{ width: '100%' }}>
                      <div style={{ fontSize: '24px', color: 'var(--app-primary-color)' }}>🚀</div>
                      <Title level={5}>高效处理</Title>
                      <Paragraph type="secondary" style={{ textAlign: 'center' }}>
                        支持批量处理，一次操作即可处理多个文件，大大提高工作效率
                      </Paragraph>
                    </Space>
                  </Col>
                  <Col xs={24} md={8}>
                    <Space direction="vertical" align="center" style={{ width: '100%' }}>
                      <div style={{ fontSize: '24px', color: '#52c41a' }}>🛡️</div>
                      <Title level={5}>安全可靠</Title>
                      <Paragraph type="secondary" style={{ textAlign: 'center' }}>
                        提供预览功能，在正式操作前可以查看处理结果，确保操作安全
                      </Paragraph>
                    </Space>
                  </Col>
                  <Col xs={24} md={8}>
                    <Space direction="vertical" align="center" style={{ width: '100%' }}>
                      <div style={{ fontSize: '24px', color: '#faad14' }}>🎨</div>
                      <Title level={5}>简单易用</Title>
                      <Paragraph type="secondary" style={{ textAlign: 'center' }}>
                        直观的操作界面，清晰的步骤指引，让复杂的文件处理变得简单
                      </Paragraph>
                    </Space>
                  </Col>
                </Row>
              </Card>
            </Space>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default ToolsPage;